@keyframes layer-rollIn {
   0% {background: #ebebeb;margin-left: 0;margin-top: 0;}
    25% {background: #cd0000;margin-left:500px;margin-top: 0;}
    50%{background: chartreuse;margin-left:500px;margin-top: 500px }
    75%{background: blueviolet;margin-left: 0;margin-top:500px}
    100%{background: aquamarine;left: 0;top: 0; }
}
.div{
    background: #ebebeb;
    height: 200px;
    width: 200px;
    animation-name: layer-rollIn;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    animation-play-state: running;
}
